<template>
  <div>
    <div class="block">
      <!-- <span class="demonstration">时间范围</span>
      <el-date-picker
        style="margin: 20px"
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-button type="success">查询</el-button> -->
    </div>

    <!-- 图表 -->
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("chart"));
    var colors = ["#99CC33", "#ffcc00", "#EA5151", "#CC3F57", "#9A2555"];
    var bgColor = "#00370D";
    var itemStyle = {
      star5: {
        color: colors[0],
      },
      star4: {
        color: colors[1],
      },
      star3: {
        color: colors[2],
      },
      star2: {
        color: colors[3],
      },
    };

    var data = [
      {
        name: "水果",
        itemStyle: {
          color: colors[1],
        },
        children: [
          {
            name: "热带水果",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "芒果/柠檬/木瓜",
                  },
                  {
                    name: "红毛丹",
                  },
                  {
                    name: "番石榴",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "菠萝/树菠萝",
                  },
                  {
                    name: "香蕉",
                  },
                  {
                    name: "椰子",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "榔色果/山竹子",
                  },
                ],
              },
            ],
          },
          {
            name: "亚热带水果",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "龙眼/荔枝",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "杨梅/杨桃",
                  },
                  {
                    name: "蜜柑/金柑",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        name: "菜系",
        itemStyle: {
          color: colors[2],
        },
        children: [
          {
            name: "鲁菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "糖醋鱼",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "乌鱼蛋汤",
                  },
                  {
                    name: "红烧海螺",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "葱爆羊肉",
                  },
                ],
              },
            ],
          },
          {
            name: "粤菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "龙虎斗",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "潮州火筒炖鲍翅",
                  },
                  {
                    name: "沙茶牛肉",
                  },
                  {
                    name: "卤水猪手皇",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "潮式卤鹅肝",
                  },
                ],
              },
            ],
          },
          {
            name: "川菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "鱼香肉丝",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "麻婆豆腐",
                  },
                  {
                    name: "四川火锅",
                  },
                ],
              },
              {
                name: "3☆",
              },
              {
                name: "2☆",
                children: [
                  {
                    name: "香辣小龙虾",
                  },
                ],
              },
            ],
          },
          {
            name: "湘菜",
            children: [
              {
                name: "4☆",
                children: [
                  {
                    name: "金鱼戏莲",
                  },
                  {
                    name: "湘西外婆菜",
                  },
                  {
                    name: "洞庭野鸭",
                  },
                ],
              },
            ],
          },
          {
            name: "闽菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "佛跳墙",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "太极明虾",
                  },
                  {
                    name: "厦门沙茶面",
                  },
                ],
              },
              {
                name: "3☆",
                children: [
                  {
                    name: "红糟鱼排",
                  },
                ],
              },
            ],
          },
          {
            name: "浙菜",
            children: [
              {
                name: "4☆",
                children: [
                  {
                    name: "西湖醋鱼",
                  },
                ],
              },
            ],
          },
          {
            name: "苏菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "盐水鸭（金陵板鸭）",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "黄焖栗子鸡",
                  },
                ],
              },
            ],
          },
           {
            name: "徽菜",
            children: [
              {
                name: "5☆",
                children: [
                  {
                    name: "红烧果子狸",
                  },
                ],
              },
              {
                name: "4☆",
                children: [
                  {
                    name: "火腿炖甲鱼",
                  },
                ],
              },
            ],
          },
        ],
      },
    ];

    for (var j = 0; j < data.length; ++j) {
      var level1 = data[j].children;
      for (var i = 0; i < level1.length; ++i) {
        var block = level1[i].children;
        var bookScore = [];
        var bookScoreId;
        for (var star = 0; star < block.length; ++star) {
          var style = (function (name) {
            switch (name) {
              case "5☆":
                bookScoreId = 0;
                return itemStyle.star5;
              case "4☆":
                bookScoreId = 1;
                return itemStyle.star4;
              case "3☆":
                bookScoreId = 2;
                return itemStyle.star3;
              case "2☆":
                bookScoreId = 3;
                return itemStyle.star2;
            }
          })(block[star].name);

          block[star].label = {
            color: style.color,
            downplay: {
              opacity: 0.5,
            },
          };

          if (block[star].children) {
            style = {
              opacity: 1,
              color: style.color,
            };
            block[star].children.forEach(function (book) {
              book.value = 1;
              book.itemStyle = style;

              book.label = {
                color: style.color,
              };

              var value = 1;
              if (bookScoreId === 0 || bookScoreId === 3) {
                value = 5;
              }

              if (bookScore[bookScoreId]) {
                bookScore[bookScoreId].value += value;
              } else {
                bookScore[bookScoreId] = {
                  color: colors[bookScoreId],
                  value: value,
                };
              }
            });
          }
        }

        level1[i].itemStyle = {
          color: data[j].itemStyle.color,
        };
      }
    }

    var option = {
      backgroundColor: bgColor,
      color: colors,
      series: [
        {
          type: "sunburst",
          center: ["50%", "48%"],
          data: data,
          sort: function (a, b) {
            if (a.depth === 1) {
              return b.getValue() - a.getValue();
            } else {
              return a.dataIndex - b.dataIndex;
            }
          },
          label: {
            rotate: "radial",
            color: bgColor,
          },
          itemStyle: {
            borderColor: bgColor,
            borderWidth: 2,
          },
          levels: [
            {},
            {
              r0: 0,
              r: 40,
              label: {
                rotate: 0,
              },
            },
            {
              r0: 40,
              r: 105,
            },
            {
              r0: 115,
              r: 140,
              itemStyle: {
                shadowBlur: 2,
                shadowColor: colors[2],
                color: "transparent",
              },
              label: {
                rotate: "tangential",
                fontSize: 10,
                color: colors[0],
              },
            },
            {
              r0: 140,
              r: 145,
              itemStyle: {
                shadowBlur: 80,
                shadowColor: colors[0],
              },
              label: {
                position: "outside",
                textShadowBlur: 5,
                textShadowColor: "#333",
              },
              downplay: {
                label: {
                  opacity: 0.5,
                },
              },
            },
          ],
        },
      ],
    };

    myChart.setOption(option);
  },
  created(){
     this.$bus.emit('subTitle','销售统计>','商品统计>')
  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 550px;
  border: 1px solid #99cc33;
  border-radius: 10px;
}
</style>